<template>
	<div class="licence-photo-wrapper">
		<!-- <uni-bankhome /> -->
		<div class="content-wrapepr">
			<p class="text">公司名称：{{storeData.companyName||'--'}}</p>
			<p class="text">公司地址地区：{{storeData.companyAddressPath||'--'}}{{storeData.companyAddress||'--'}}</p>
			<p class="text">法定经营范围：{{storeData.scope||'--'}}</p>
		</div>
		<div class="licence-see">
			<div class="text">营业执照</div>
			<u-icon v-if="licenceShow===false" name="arrow-right" @click="showYanzheng" label="查看" labelPos="left"
				labelColor="#5983ff" color="#5983ff"></u-icon>
		</div>
		<zmm-watermark watermark="百焕商圈" v-if="licenceShow===true" :src="storeData.img" @click="preview()"></zmm-watermark>
		<div v-if="shopList.length!==0">
			<div class="licence-see">
				<div class="text">店铺推荐</div>
			</div>
			<view class="goods-list">
				<div class="goods-item bp" @click="navigateToDetailPage(item)" v-for="item,i in shopList" :key="i">
					<div class="goods-img">
						<image class="image" :src="item.storeLogo" mode="aspectFill">
						</image>
					</div>
					<div class="goods-desc">
						<div class="goods-title">
							{{ item.storeName||'' }}
						</div>
						<div class='site'>
							{{item.storeAddressPath}}{{ item.storeAddressDetail}}
						</div>
						<div class='evaluate'>
							<span class='grade' style='font-size: 32rpx;'>{{item.score || 0.0}}分</span>
							<span class='sales'>
								月售 {{item.monthSales || 0}}+
							</span>
						</div>
					</div>
				</div>
			</view>
		</div>
		<u-popup mode="center" v-model="show" border-radius="16" :closeable="true">
			<view class="image-yanzheng">
				<div class="title">在下方输入图片验证码</div>
				<div class="yam">
					<u-input v-model="yam" class="input" placeholder="请输入" />
					<view class="code-img-wrapper" @click="updateImageCode">
						<canvas style="width:180rpx;height:76rpx;" canvas-id="canvas"></canvas>
					</view>
				</div>
				<button class="button" @click="submit">确认</button>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import {
		getLicencePhoto,
		StoreListrRecommend
	} from "@/api/store.js";
	import {
		Mcaptcha
	} from '@/utils/mcaptcha'
	export default {
		data() {
			return {
				yam: '',
				show: false,
				storeData: {},
				licenceShow: false,
				shopList: []
			};
		},
		onLoad(options) {
			this.getStoreLicencePhoto(options.id);
			this.getRecommend(options.id)
		},
		onReady() {

		},
		methods: {
			async getStoreLicencePhoto(id) {
				let res = await getLicencePhoto(id);
				if (res.data.success) {
					this.storeData = res.data.result;
				}
			},
			getRecommend(id) {
				StoreListrRecommend({
					storeId: id,
					pagesSize: 10,
					pagesNumber: 1
				}).then((res) => {
					this.shopList = res.data.result.records
				})
			},
			showYanzheng() {
				this.show = true
				setTimeout(() => {
					this.mcaptcha = new Mcaptcha({
						el: 'canvas',
						width: 80,
						height: 35,
						createCodeImg: ""
					});
				}, 100)
			},
			// 刷新验证码
			updateImageCode() {
				this.mcaptcha.refresh()
			},
			// 提交前校验图形验证码
			submit() {
				if (!this.yam) {
					return uni.showToast({
						icon: "none",
						title: '请输入图形验证码'
					})
				}
				let validate = this.mcaptcha.validate(this.yam)
				if (!validate) {
					this.updateImageCode()
					uni.showToast({
						icon: "none",
						title: '图形验证码错误'
					})
					return
				}
				this.show = false
				this.licenceShow = true
			},
			/**
			 * 点击图片放大或保存
			 */
			preview() {
				uni.previewImage({
					current: 0,
					urls: [this.storeData.img],
					longPressActions: {
						itemList: ["保存图片"],
						success: function(data) {},
						fail: function(err) {},
					},
				});
			},
			// 跳转到详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.id}`,
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.licence-photo-wrapper {

		.content-wrapepr {
			margin-top: 16upx;
			padding: 32upx;
			background-color: #ffffff;
			margin-bottom: 16upx;

			.text {
				margin: 20rpx 0;
				color: rgba(141, 141, 141, 1);
			}

		}

		.licence-see {
			padding: 32upx;
			display: flex;
			justify-content: space-between;
		}

		.image-yanzheng {
			width: 520upx;
			padding: 80upx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 40upx;
			}

			.yam {
				width: 360upx;
				margin-top: 24upx;
				padding: 0 24upx;
				border: 2upx solid rgba(227, 227, 227, 1);
				border-radius: 8upx;
				display: flex;
				align-items: center;

				.input {
					flex: 1;
				}
			}

			.button {
				margin-top: 32upx;
				width: 400upx;
				height: 88upx;
				line-height: 88upx;
				background: rgba(255, 148, 110, 1);
				border-radius: 44upx;
				color: #ffffff;
				font-size: 40upx;
			}
		}

		.goods-list {
			display: flex;
			justify-content: flex-start;
			flex-flow: row wrap;
			padding: 0 10upx;
			width: 100%;


			.goods-item {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-bottom: 24upx;
				margin-left: 13upx;
				width: 346upx;
				padding-bottom: 16upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 16upx;

				.goods-img {
					.image {
						width: 346upx;
						height: 346upx;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
					}
				}

				.base {
					display: flex;
					justify-content: center;
					width: 100%;
				}

				.goods-desc {
					width: 318upx;
					height: 148upx;

					.goods-title {
						margin: 5upx 0 8upx 0;
						font-size: 26upx;
						font-weight: bold;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.evaluate {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgba(255, 137, 33, 1);

						.grade {
							font-size: 26upx;
						}

						.sales {
							font-size: 20upx;
							color: rgba(173, 170, 170, 1);
						}
					}

					.goods-price {
						font-size: 32rpx;
						margin-top: 15upx;
					}

					.site {
						font-size: 20rpx;
						color: rgba(173, 170, 170, 1);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 8upx;
					}

					.distance {
						display: flex;
						justify-content: flex-end;
						font-size: 20upx;
						color: rgba(23, 23, 23, 1);
					}
				}
			}
		}
	}
</style>
